<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="产品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入产品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择产品类型" clearable size="small">
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['product:product:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['product:product:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['product:product:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['product:product:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-sort"
          size="mini"
          @click="handleSort"
          v-show="sortVisible"
          v-hasPermi="['product:product:edit']"
        >保存排序
        </el-button>
      </el-col>
      <LibrarySelect :refresh="getList"/>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange" ref="dataTable"
              row-key="productId">
      <el-table-column type="selection" width="55" align="center" class-name="allowDrag"/>
      <el-table-column label="产品图片" align="center" prop="image" class-name="allowDrag">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.image!=null && JSON.parse(scope.row.image).length>0?JSON.parse(scope.row.image)[0].materialUrl:null"
            fit="cover">
            <div slot="error">
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" align="center" prop="name" class-name="allowDrag">
        <template slot-scope="scope">
          <span>￥{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" prop="price" class-name="allowDrag">
        <template slot-scope="scope">
          <span>￥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center" prop="stock" class-name="allowDrag">
        <template slot-scope="scope">
          <span>{{ scope.row.stock }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" class-name="allowDrag">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width allowDrag">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['product:product:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['product:product:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改产品对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" class="dialog_form" label-width="80px">
        <el-collapse v-model="activeCollapseNames">
          <el-tabs tab-position="left" style="min-height: 500px;">
            <el-tab-pane label="基本信息">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="产品类型" prop="type">
                    <el-radio-group v-model="form.type">
                      <el-radio
                        v-for="dict in typeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictValue"
                      >{{ dict.dictLabel }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="产品名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入产品名称"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-collapse-item title="产品图片" name="1">
                  <el-form-item title="产品图片">
                    <ImageBox v-model="form.image" :max="20" :clear="false"/>
                  </el-form-item>
                </el-collapse-item>
                <el-collapse-item title="产品分类" name="2">
                </el-collapse-item>
                <el-collapse-item title="产品参数" name="3">
                  <el-row>
                    <el-col :span="9">
                      <el-form-item label="价格" prop="price">
                        <el-input-number v-model="form.price" :controls="false" size="medium" :min="0" :precision="2"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="库存" prop="stock">
                        <el-input-number v-model="form.stock" :controls="false" size="medium" :min="0" :precision="0"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" v-for="(item,index) in parameterList">
                      <el-form-item :label="item.name">
                        <el-select v-model="strParameterList[index].value" v-if="item.fieldType==='0'" clearable>
                          <el-option
                            v-for="item1 in item.values"
                            :key="item1.parameterValueId"
                            :label="item1.name"
                            :value="item1.parameterValueId">
                          </el-option>
                        </el-select>
                        <el-input size="small" v-else-if="item.fieldType==='1'"
                                  v-model="strParameterList[index].value"></el-input>
                        <el-input-number v-else-if="item.fieldType==='2'" v-model="strParameterList[index].value" :controls="false" size="medium"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="产品主图视频" name="4">
                  <el-form-item prop="video">
                    <ImageBox v-model="form.video" :max="1" :clear="false"/>
                  </el-form-item>
                </el-collapse-item>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="产品规格" class="spec_pane">
              <el-container>
                <el-header height="160px">
                  <el-collapse-item title="产品规格设置" name="5">
                    <el-scrollbar style="height: 120px;" tag="section">
                      <el-form-item :label="item.name" v-for="(item,index) in specList">
                        <el-checkbox-group v-model="strSpecList[index].value" @change="handleSpecValueChange">
                          <el-checkbox :label="dict.name" v-for="dict in item.values"></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </el-scrollbar>
                  </el-collapse-item>
                </el-header>
                <el-main v-if="tableSpecVisible">
                  <el-row>
                    <el-col :span="6">
                      <el-form-item label="价格" prop="customPrice">
                        <el-select v-model="form.customPrice" size="mini">
                          <el-option
                            v-for="dict in customOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="库存" prop="customStock">
                        <el-select v-model="form.customStock" size="mini">
                          <el-option
                            v-for="dict in customOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="重量" prop="customWeight">
                        <el-select v-model="form.customWeight" size="mini">
                          <el-option
                            v-for="dict in customOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-table
                    :data="tableSpecList"
                    style="width: 100%; margin-top: 20px" border row-key="tableId" :span-method="objectSpanMethod">
                    <el-table-column :label="item.label" :prop="item.prop" v-for="(item,index) in tableSpecProp"
                                     :width="item.prop === 'price' || item.prop === 'stock' || item.prop === 'weight'?160:null"
                                     align="center"
                                     v-if="!((item.prop === 'price' && form.customPrice==='0') || (item.prop === 'stock' && form.customStock==='0') || (item.prop === 'weight' && form.customWeight==='0'))">
                      <template slot-scope="scope">
                        <span v-if="item.prop === 'price' || item.prop === 'stock' || item.prop === 'weight'">
                          <el-input-number v-model="tableSpecList[scope.$index][item.prop]" controls-position="right"
                                           size="small"
                                           :min="0" :precision="item.prop === 'stock'?0:2"/>
                        </span>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-main>
              </el-container>

            </el-tab-pane>
            <el-tab-pane label="详情介绍">
              <editor v-model="form.remark" :min-height="500"/>
            </el-tab-pane>
            <el-tab-pane label="其他设置">
              <el-collapse-item title="配送设置" name="6">
                <!--                <el-form-item label="配送方式" prop="video">-->
                <!--                  <ImageBox v-model="form.video" :max="1" :clear="false"/>-->
                <!--                </el-form-item>-->
                <el-form-item label="运费模板" prop="postageType">
                  <el-radio-group v-model="form.postageType">
                    <el-radio
                      v-for="dict in postageOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue"
                    >{{ dict.dictLabel }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="重量" prop="weight">
                  <el-input-number v-model="form.weight" :controls="false" :min="0" :step="0.0001" size="small"/>
                  （单位：kg）
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="上架设置" name="7">
                <el-form-item label="上架时间" prop="status">
                  <el-radio-group v-model="form.status">
                    <el-radio
                      v-for="dict in statusOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue"
                    >{{ dict.dictLabel }}
                    </el-radio>
                  </el-radio-group>
                  <div v-if="form.status==='2'">
                    <el-date-picker clearable size="small" v-model="form.showTime" type="datetime"
                                    placeholder="选择自动上架时间"/>
                  </div>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="交易设置" name="8">
                <el-form-item label="起(限)购量" prop="customPurchase">
                  <el-radio-group v-model="form.customPurchase">
                    <el-radio
                      v-for="dict in customOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue"
                    >{{ dict.dictLabel }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <div v-if="form.customPurchase==='1'">
                  <el-form-item label="起购量" prop="minPurchase">
                    <el-input-number v-model="form.minPurchase" :controls="false" :min="1" size="small" :precision="0"/>
                    （起购量最小值为1）
                  </el-form-item>
                  <el-form-item label="限购量" prop="maxPurchase">
                    <el-input-number v-model="form.maxPurchase" :controls="false" :min="0" size="small" :precision="0"/>
                    （值为空不限购）
                  </el-form-item>
                </div>
              </el-collapse-item>
            </el-tab-pane>
          </el-tabs>
        </el-collapse>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  updateProductSort
} from "@/api/mall/product/product";
import Sortable from "sortablejs";
import LibrarySelect from "@/components/XyComponents/LibrarySelect";
import ImageBox from "@/components/XyComponents/ImageBox";
import Editor from '@/components/XyComponents/Editor';
import {listParameterToProduct} from "@/api/mall/product/parameter";
import {listSpecToProduct} from "@/api/mall/product/spec";

export default {
  name: "Product",
  components: {
    LibrarySelect, ImageBox, Editor
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      idNames: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品表格数据
      productList: [],
      // 产品表格原始数据
      oldProductList: [],
      // 排序保存按钮显示
      sortVisible: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 产品参数数据
      parameterList: [],
      strParameterList: [],
      // 产品规格数据
      specList: [],
      strSpecList: [],
      //规格表数据 | 参数
      tableSpecList: [],
      //规格表是否显示
      tableSpecVisible: false,
      //规格表变量名
      tableSpecProp: [],
      //规格表是否变更（未变更则保存时不进行修改）
      specChangeVisible: false,
      // 自定义字典
      customOptions: [],
      // 邮费状态字典
      postageOptions: [],
      // 产品类型字典
      typeOptions: [],
      // 状态字典
      statusOptions: [],
      activeCollapseNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: null,
        status: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          {required: true, message: "产品名称不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getDict();
  },
  methods: {
    /** 查询产品列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询字典信息 */
    getDict() {
      this.getDicts("sys_mall_product_type").then(response => {
        this.typeOptions = response.data;
      });
      this.getDicts("sys_mall_onSale_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("sys_mall_custom_type").then(response => {
        this.customOptions = response.data;
      });
      this.getDicts("sys_mall_postage_type").then(response => {
        this.postageOptions = response.data;
      });
    },
    // 产品类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.type);
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        productId: null,
        name: null,
        image: null,
        video: null,
        strParameter: null,
        strSpec: null,
        price: 0,
        customPrice: '0',
        stock: 0,
        customStock: '0',
        weight: 0,
        customWeight: '0',
        postageType: '1',
        minPurchase: 1,
        maxPurchase: 0,
        customPurchase: '0',
        type: '0',
        status: "0",
        showTime: null,
        remark: null,
      };
      this.parameterList = [];
      this.strParameterList = [];
      this.specList = [];
      this.strSpecList = [];
      this.tableSpecList = [];
      this.tableSpecProp = [];
      this.tableSpecVisible = false;
      this.specChangeVisible = false;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.idNames = selection.map(item => item.productId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 产品规格选中数据改变
    handleSpecValueChange() {
      if (this.specChangeVisible === false) {
        this.specTableStructure(0);
      }
      this.specTableStructure(1);
      this.tableSpecVisible = this.tableSpecList.length > 0;
      this.specChangeVisible = true;
    },
    //规格管理 key 0验证参数 | 1循环构建 | 2保存
    specTableStructure(key) {
      if (key === 0) {
        for (let i = 0; i < this.strSpecList.length; i++) {
          if (this.strSpecList[i].value.length > 0) {
            for (let j = 0; j < this.strSpecList[i].value.length; j++) {
              let times = 0;
              for (let k = 0; k < this.specList[i].values.length; k++) {
                if (this.strSpecList[i].value[j] === this.specList[i].values[k].name) {
                  times = 1;
                  break;
                }
              }
              if (times === 0) {
                this.strSpecList[i].value.splice(j--, 1);
              }
            }
          }
        }
      } else if (key === 1) {
        let length = 0;
        let table = [];
        this.tableSpecProp = [];
        let ergodic = 1;
        for (let i = 0; i < this.strSpecList.length; i++) {
          if (this.strSpecList[i].value.length > 0) {
            length = length === 0 ? (1 * this.strSpecList[i].value.length) : (length * this.strSpecList[i].value.length);
            this.tableSpecProp.push({label: this.specList[i].name, prop: this.specList[i].name});
          }
        }
        for (let i = 0; i < length; i++) {
          table.push({tableId: i, price: 0, stock: 0, weight: 0, visible: false});
        }
        for (let i = 0; i < this.strSpecList.length; i++) {
          let size = this.strSpecList[i].value.length;
          if (size > 0) {
            ergodic = ergodic * size;
            let loop = length / ergodic;
            //l 控制循环次数 | j参数输出 | k 控制轮读次数
            for (let l = 0; l < ergodic / size; l++) {
              for (let j = 0; j < size; j++) {
                for (let k = 0; k < loop; k++) {
                  let result = l * length * size / ergodic + j * loop + k;
                  table[result][this.specList[i].name] = this.strSpecList[i].value[j];
                }
              }
            }
          }
        }
        const array = this.tableSpecProp.map((item, index) => {
          return item.prop
        }).join(',').split(',');
        table = this.mergeTableRow({
          data: table,
          mergeColNames: array, // 需要合并的列，默认合并列相同的数据
          firstMergeColNames: array, // 受影响的列，只合并以firstMerge为首的同类型数据
          firstMerge: array[0] // 以哪列为基础进行合并，一般为第一列
        })
        this.tableSpecList = table;
        this.tableSpecProp = this.tableSpecProp.concat([{label: '价格', prop: 'price'}, {
          label: '库存',
          prop: 'stock'
        }, {label: '重量', prop: 'weight'}]);
      } else if (key === 2) {
        let str = {table: this.tableSpecList, prop: this.tableSpecProp, ids: [], specValue: []}
        for (let i = 0; i < this.strSpecList.length; i++) {
          if (this.strSpecList[i].value.length > 0) {
            str.ids.push({id: this.specList[i].specId, name: this.specList[i].name});
            str.specValue.push(this.strSpecList[i].value);
          }
        }
        this.form.strSpec = JSON.stringify(str);
      }
    },


    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      const span = column['property'] + '-span'
      if (row[span]) {
        return row[span]
      }
    },
    getCommon() {
      listParameterToProduct().then(response => {
        this.parameterList = response.data;
        for (let i = 0; i < this.parameterList.length; i++) {
          this.strParameterList.push({value: null});
        }
      });
      listSpecToProduct().then(response => {
        this.specList = response.data;
        for (let i = 0; i < this.specList.length; i++) {
          this.strSpecList.push({value: []});
        }
      });
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getCommon();
      this.open = true;
      this.title = "添加产品";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getProduct({productId: row.productId}).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改产品";
      }).then(() => {
        listParameterToProduct().then(response => {
          const str = JSON.parse(this.form.strParameter);
          this.parameterList = response.data;
          for (let i = 0; i < this.parameterList.length; i++) {
            let key = 0;
            for (let j = 0; j < str.length; j++) {
              if (this.parameterList[i].parameterId === str[j].Id) {
                this.strParameterList.push({value: str[j].value});
                key = 1;
                break;
              }
            }
            if (key === 0) {
              this.strParameterList.push({value: null});
            }
          }
        });
        listSpecToProduct().then(response => {
          const str = JSON.parse(this.form.strSpec);
          let array = [];
          this.specList = response.data;
          for (let i = 0; i < this.specList.length; i++) {
            array.push({value: []});
          }
          this.tableSpecList = str.table;
          if (this.tableSpecList.length > 0) {
            this.tableSpecVisible = true;
          }
          this.tableSpecProp = str.prop;
          for (let i = 0; i < str.ids.length; i++) {
            for (let j = 0; j < this.specList.length; j++) {
              if (str.ids[i].id === this.specList[j].specId) {
                array[i].value = str.specValue[i];
              }
            }
          }
          this.strSpecList = array;
        });
      });
    },
    /** 修改状态按钮操作 */
    handleStatusChange(row) {
      updateProduct(row).then(response => {
        this.msgSuccess("修改成功");
      });
    },
    //保存验证
    synthesisStr() {
      let st = [];
      for (let i = 0; i < this.strParameterList.length; i++) {
        if (this.strParameterList[i].value != null) {
          st.push({
            Id: this.parameterList[i].parameterId,
            name: this.parameterList[i].name,
            filedType: this.parameterList[i].filedType,
            value: this.strParameterList[i].value,
            viewType: this.parameterList[i].viewType
          })
        }
      }
      this.form.strParameter = JSON.stringify(st);
      if (this.specChangeVisible === false) {
        this.form.strSpec = null;
      } else if (this.specChangeVisible === true) {
        this.specTableStructure(2);
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.synthesisStr();
          if (this.form.productId != null) {
            updateProduct(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProduct(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids;
      const names = row.name || this.idNames;
      let that = this;
      this.$confirm('是否确认删除产品"' + names + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delProduct(that.updateParamIds(productIds));
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch((err) => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('product/product/export', {
        ...this.queryParams
      }, `product_product.xlsx`)
    },
    /** 保存排序按钮操作 */
    handleSort() {
      this.$confirm('是否确认保存新排序?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = this.sortOrderListOnlyDynamic(this.productList, this.oldProductList, "productId");
        if (params.length > 0) {
          return updateProductSort(this.updateParamIds(params));
        }
      }).then(() => {
        this.getList();
        this.sortVisible = false;
        this.msgSuccess("保存成功");
      }).catch((err) => {
      })
    }
  },
  mounted() {
    const el = this.$refs.dataTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
    Sortable.create(el, {
      handle: ".allowDrag",
      onEnd: evt => {
        const targetRow = this.productList.splice(evt.oldIndex, 1)[0];
        this.productList.splice(evt.newIndex, 0, targetRow);
        this.sortVisible = true;
      }
    });
  }
};
</script>

<style scoped>
.dialog_form >>> .el-collapse {
  border-top: none !important;
  border-bottom: none !important;
}

.dialog_form >>> .el-collapse-item__header {
  border-bottom: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #606266 !important;
}

.dialog_form >>> .el-collapse-item__wrap {
  border-bottom: none !important;
}

.dialog_form >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}

.spec_pane >>> .el-form-item {
  margin-bottom: 0 !important;
}

</style>
